<!--
 @description 客户-订单信息
 @fileName OrderRecord.vue
 @author zengqiongying
 @created 2022/11/11 13:15:27
-->
<template>
  <div class="order-record">
    <List
      ref="list"
      class="c-list-scroll"
      :finished.sync="finished"
      :reset-fun="resetData"
      :load="load"
      :refresh="load"
      :default-active="true"
    >
      <div v-for="(item,i) in list" :key="i" class="record-item" @click="handleDetail(item)">
        <div class="item-title">
          <div> {{ item.createTime | filterTime }}</div>
          <div v-if="item.state!=='06'" class="c-yellow">未完结</div>
          <div v-else class="status">已完结<svg-icon icon-class="xiangyou" /></div>
        </div>
        <div class="item-content">订单编码：{{ item.retailOrderCode }}</div>
      </div>
    </List>
  </div>
</template>

<script>
import mixin from './mixin'
import List from '@/components/List'
import { getOrderList } from '@/apis/customer'
export default {
  name: 'CustomerOrderRecord',
  components: { List },
  mixins: [mixin],
  data() {
    return {
      list: [],
      finished: false // 列表是否加载完成
    }
  },

  computed: {
    filtersRaw() {
      return [
        { id: 'clueCustomerId', property: 'clueCustomerId', value: this.clueCustomerId, operator: '=' }
      ]
    },
    paramsRaw() {
      const { disCode } = this.detail
      return { clueCustomerId: this.clueCustomerId, disCode }
    }
  },

  created() {},
  activated() {},

  mounted() {},

  methods: {
    initData() {
      this.resetPageData()
    },
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, rows) {
      const data = new FormData()
      data.append('page', page)
      data.append('rows', rows)
      // data.append('filtersRaw', JSON.stringify(this.filtersRaw))
      data.append('paramsRaw', JSON.stringify(this.paramsRaw))

      const headers = {
        'Permission-PerCode': !this.isCommonCustomerPool ? 'my_customer_pool' : 'common_customer_pool',
        'Permission-App': 'top2-crm-app'
      }
      return getOrderList(data, headers).then(res => {
        const records = res.data.records || []
        if (page === 1) {
          this.$refs.list ? this.$refs.list.page = 1 : ''
          this.list = records
        } else {
          this.list.push(...records)
        }
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    },
    handleDetail(row) {
      const { disCode, retailOrderCode = '' } = row
      this.$router.push({
        path: '/customer/order/detail',
        query: { disCode, retailOrderCode, clueCustomerId: this.clueCustomerId }
      })
    }
  }
}

</script>
<style lang='less' scoped>
  .order-record{
    padding: 16px;
    .c-list-scroll{
      min-height: calc(35vh);
    }
    .record-item{
      position: relative;
      margin-bottom: 16px;
      padding: 0 16px;
      box-sizing: border-box;
      background: #F8F8FA;
      border-radius: 16px;
      &:last-child{
        margin-bottom: 0;
      }
    }
    .item-title{
      position: relative;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: #EFF2F7 1px solid;
      font-size: 12px;
      color: #B5B7C4;
      .status{
        display: flex;
        align-items: center;
        color:#3C4458;
        .svg-icon{
          font-size: 14px;
          margin-left: 3px;
        }
      }
      .c-yellow{
        color: #EE6E25;
      }
    }
    .item-content{
      color: #3C4458;
      font-size: 14px;
      font-weight: bold;
      padding: 16px 0;
    }
  }
</style>
